<?xml version='1.0' encoding='utf-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:c="http://java.sun.com/jsp/jstl/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:a4j="http://richfaces.org/a4j"
	xmlns:rich="http://richfaces.org/rich" >

<ui:composition template="../commun_page/template.xhtml">

	<ui:define name="title">
			<title>Voyages</title>
	</ui:define>

	<ui:define name="body">
	
			<h1>Liste des voyages</h1>
			 <h:form>
			<rich:dataList var="voyage" value="#{destinationManager.voyages}" rows="1">
	            <h:outputText value="#{voyage.id}"/><br/>
	        </rich:dataList>
        </h:form>
			
			
			<rich:dataTable 
            	onRowMouseOver="this.style.backgroundColor='#F1F1F1'"
                onRowMouseOut="this.style.backgroundColor='#{a4jSkin.tableBackgroundColor}'"
                cellpadding="0" cellspacing="0" 
                border="0" var="voyage" value="#{destinationManager.voyages}"
                id="listeVoyages"
           	>
            	 <f:facet name="header">
	                 <rich:columnGroup>
	                     <rich:column>
	                     </rich:column>
	                     <rich:column>
	                         <h:outputText value="Destination" />
	                     </rich:column>
	                     <rich:column>
	                         <h:outputText value="Date" />
	                     </rich:column>
	                     <rich:column>
	                         <h:outputText value="Durée (jours)" />
	                     </rich:column>
	                     <rich:column>
	                         <h:outputText value="Prix" />
	                     </rich:column>
	                     <rich:column>
	                         <h:outputText value="Options" />
	                     </rich:column>
	                 </rich:columnGroup>
       			</f:facet>
	                 
                <rich:columnGroup>
                     <rich:column >
		             	<ul class="thumb">
							<li><a href="#"><img src="../commun_img/bridge.jpg"  alt="Robots like cameras" /></a></li>
						</ul>
                     </rich:column>
                     <rich:column>
                         <h:outputText value="#{voyage.destination}" />
                     </rich:column>
                     <rich:column>
                         <h:outputText value="#{voyage.date}" />
                     </rich:column>
                     <rich:column>
                         <h:outputText value="#{voyage.duree} j" />
                     </rich:column>
                     <rich:column>
                         <h:outputText value="#{voyage.prix}" />
                     </rich:column>
                     <rich:column >
						<h:form><img src="../commun_img/add.png" title="Ajouter au panier" alt="Ajouter au panier" />
							<a4j:commandButton value="Ajouter au panier" action="#{destinationManager.commander}" render="out"  >
								<f:setPropertyActionListener 
									value="#{voyage.id}"
									target="#{destinationManager.idVoyage}" 
								/>
							</a4j:commandButton>
						</h:form>
                     </rich:column>
                </rich:columnGroup>
            </rich:dataTable> 
			<p>
			Test</p>
			<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
			<script src="../commun_js/zoomer.js" type="text/javascript" ></script>
			<script type="text/javascript">
				$(document).ready(function(){
				 	$('ul.thumb li').Zoomer({speedView:200,speedRemove:400,altAnim:true,speedTitle:400,debug:false});
				});
			</script>
	</ui:define>

</ui:composition>

</html>
